<template>
	<view class="page-box">
		<view class="jianbian">
			<view class="back">
				<image src="/static/images/left.png" class="left-icon" @click="backToLast"></image>
			</view>
			<scroll-view scroll-y class="scroll-box" >
				<view class="content-box">
					<view style="margin-bottom: 0.2rem;">{{$t('logoff.title1')}}</view>
					<view style="margin-bottom: 0.2rem;">{{$t('logoff.title2')}}</view>
					<view class="grey-font"> 
						<view style="margin-bottom: 0.2rem;">{{$t('logoff.title3')}}</view>
						<view style="margin-bottom: 0.2rem;">{{$t('logoff.content1')}}</view>
						<view style="margin-bottom: 0.2rem;">{{$t('logoff.content2')}}</view>
						<view style="margin-bottom: 0.2rem;">{{$t('logoff.content3')}}</view>
					</view>
					<view style="margin-bottom: 0.2rem;">{{$t('logoff.content4')}}</view>
					<view>{{$t('logoff.content5')}}</view>
				</view>
			</scroll-view>
			<!-- 按钮 -->
			<view class="btn-box">
					<button class="use-btn" @click="backToLast">{{$t('logoff.btn1')}}</button>
					<button class="logoff-btn" @click="logOff">{{$t('logoff.btn2')}}</button>
			</view>
		</view>
	</view>
	<upModal :modalWidth="'15rem'" :modalShow="modalShow" :modalText1="modalText1" :showImage="true" :isCancel="false"
		:isAgreement="false" :isAgreement2="false" @cancel="cancel" @cloos="cloos">
	</upModal>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, watch } from "vue";
	import {logoffAccount} from '@/api/setting/setting.js'
	import { useI18n } from 'vue-i18n'
	import upModal from '../../components/upModal.vue'
	const backToLast = () => {
		uni.navigateBack()
	}
	const { t } = useI18n()
	
	const modalShow = ref(false) // 弹窗显示状态
	const modalText1 = ref('') // 弹窗内容
	const cancel = () => {
		modalShow.value = false
	}
	const cloos = () => {
		modalShow.value = false
		if (modalText1.value == t('logoffSuccess')) {
			uni.clearStorageSync()
			// 跳转到登录页
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
	}
	
	function logOff(){
		// 注销账号 TODO
		logoffAccount().then((res)=>{
			
			if(res.code == 200){
				//"注销成功"
				modalShow.value = true
				modalText1.value= t('logoffSuccess')
				// uni.showToast({
				// 	title: t('logoffSuccess'),
				// 	icon: 'none',
				// 	duration: 1500
				// })
			}else{
				//"注销失败"
				// uni.showToast({
				// 	title: res.msg,
				// 	icon: 'none',
				// 	duration: 1500
				// })
				modalShow.value = true
				modalText1.value= res.msg
			}
		})
	}
</script>

<style scoped lang="scss">
	.page-box {
		width: 100%;
		height: 100%;
		/*微信小程序无法使用本地资源图片作为背景图 使用base64格式*/
		background-image: url('');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.jianbian {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 1rem 0;
		/* #ifdef  MP-WEIXIN*/
		padding-top: 3.5rem;
		/* #endif*/
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 38%, rgba(255, 255, 255, 1) 100%);
	}
	.back {
		margin: 0.6rem 0 0 0.8rem;
		width: 2.2rem;
		height: 2.2rem;
		line-height: 2.2rem;
		border-radius: 50%;
		z-index: 3;
	}
	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-top: 0.35rem;
		// margin: -3rem 0 0 0.5rem;
		/* #ifdef  MP-WEIXIN*/
		// margin: 0rem 0 0 0.5rem;
		/* #endif*/
	}
	.scroll-box{
		height: 75%;
	}
	.content-box{
		width: 96%;
		height: auto;
		margin: 0 auto;
		padding:1rem;
		box-sizing: border-box;
		font-size: 0.88rem;
		line-height: 1.25rem;
		text-align: left;
	}
	.grey-font{
		margin-top: 0.3rem;
		color: #6C6C6C;
	}
	
	.btn-box{
		margin-top: 2rem;
	}
	.use-btn{
		width: 9.5rem;
		height: 2.5rem;
		line-height: 2.5rem;
		border-radius: 0.25rem;
		background-color: rgba(222,134,143,1);
		color: rgba(255,255,255,1);
		font-size: 0.88rem;
		text-align: center;
		border: none;
	}
	.logoff-btn{
		margin-top: 0.8rem;
		width: 9.5rem;
		height: 2.5rem;
		line-height: 2.5rem;
		border-radius: 0.25rem;
		background-color: rgba(190,190,190,1);
		color: rgba(255,255,255,1);
		font-size: 0.88rem;
		text-align: center;
		border: 0.06rem solid rgba(187,187,187,1);
	}
</style>